<template>
  <div class="component-upload-image">
    <div>
      <div class="pic_img">
        <div class="pic_img_box">
          <el-upload class="avatar-uploader"
                     name="file"
                     :action="uploadUrl"
                     :on-progress="uploadVideoProcess"
                     :on-success="handleVideoSuccess"
                     :before-upload="beforeUploadVideo"
                     :headers="headers"
                     :show-file-list="false">
            <i v-if="(value ==='' || value === null) && !videoFlag"
               class="el-icon-upload"
               style="width: 50px;height: 50px;text-align: center;font-size: 50px"></i>
            <el-progress v-if="videoFlag === true"
                         type="circle"
                         :percentage="videoUploadPercent"
                         style="margin-top:7px;"></el-progress>
          </el-upload>
          <vue-core-video-player :cover="cover" v-if="value !=='' && value !== null &&  !videoFlag" :src="domain +
          value" style="width:640px;height: 480px;" >
            <track kind="subtitles" srclang="zh" label="Chinese" >
          </vue-core-video-player>
        </div>
      </div>
    </div>
    <p class="Upload_pictures">
      <span>最多可以上传1个视频，推荐格式MP4或WEBM，MP4必须符合编码为MPEG4(DivX)、MPEG4(Xvid)、AVC(H264)其中的一种</span>
    </p>
  </div>
</template>

<script>
import Vue from 'vue'
import {getToken} from "@/utils/auth";
import VueCoreVideoPlayer from 'vue-core-video-player'

Vue.use(VueCoreVideoPlayer,{
  lang: 'zh-CN'
})

export default {
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // domain: process.env.VUE_APP_BASE_API,
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      domain: process.env.VUE_APP_BASE_API,
      cover: '/public/favicon.ico'
    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    fileSize: {
      type: Number,
      default: 2048,
    }
  },
  methods: {
    //上传前回调
    beforeUploadVideo(file) {
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`视频文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      if (['video/mp4', 'video/webm'].indexOf(file.type) == -1) {
        this.$message({
          type: "error",
          message: "请上传正确的视频格式",
        });
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      console.log(res)
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;

      //后台上传地址
      if (res.code === 200) {
        this.$emit("input", res.fileName);
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    }
  },
  watch: {},
};
</script>

<style scoped lang="scss">
.image {
  position: relative;

  .mask {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
  }

  &:hover .mask {
    opacity: 1;
  }
}
</style>
